<template>
  <div class="user-group flex">
    <toolbox class="user-group-toolbox shrink-0"></toolbox>
    <div class="user-group-wrapper flex-1">
      <div>用户组</div>
      <div class="flex">
        <div>添加自定义用户组</div>
        <div>搜索</div>
      </div>
      <div class="user-group-table">
        <vxe-table :data="tableData" border="inner" size="small">
          <vxe-column type="seq" width="70"></vxe-column>
          <vxe-column field="name" title="用户组"></vxe-column>
          <vxe-column field="sex" title="组架构"></vxe-column>
          <vxe-column field="age" title="描述"></vxe-column>
          <vxe-column field="age1" title="所在空间"></vxe-column>
          <vxe-column field="age2" title="操作"></vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import toolbox from './toolbox.vue'

interface RowVO {
  id: number
  name: string
  role: string
  sex: string
  age: number
  age1: number
  age2: number
  address: string
}
const tableData = ref<RowVO[]>([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, age1: 28, age2: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, age1: 28, age2: 28, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, age1: 28, age2: 28, address: 'Shanghai' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, age1: 28, age2: 28, address: 'Shanghai' }
])
</script>

<style lang="scss" scoped>
.user-group {
  height: 100%;
  .user-group-toolbox{
    width: 180px;
    border-right: 1px solid #333;
  }
  .user-group-wrapper{
    padding: 15px;
    .user-group-table {
      margin-top: 15px;
    }
  }
}
</style>
